<template>
  <!-- 修改、新增学科弹层 -->
  <el-dialog
    :title="form.id ? '修改学科' : '新增学科'"
    :visible.sync="dialogFormVisible"
  >
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="学科名称" :label-width="formLabelWidth"
      prop="subjectName"
      >
        <el-input v-model="form.subjectName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" :label-width="formLabelWidth">
        <el-switch
          v-model="form.isFrontDisplay"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        >
          <!-- isFrontDisplay关闭是1，打开是true -->
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCancel">取 消</el-button>
      <el-button type="primary" @click="dialogOK">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  list,
  simple,
  detail,
  add,
  update,
  remove
} from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      formLabelWidth: '120px',
      // ??????????
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    dialogFormVisible: {
      default: false,
      type: Boolean
    },
    form: {
      type: Object,
      default: {}
    }
  },
  methods: {
    // 确定
    dialogOK () {
      // ??????????$refs[] async
      // 1.手动校验表单
      this.$refs.form.validate(async (isOK) => {
        if (isOK) {
          // 2.发送请求
          if (this.form.id) {
            // 编辑
            await update(this.form)
          } else {
            // 新增
            await add(this.form)
          }
          // 3.更新视图
          this.$emit('getSubjectsList')
          // 4.关闭弹层，表单重置。（即取消操作）
          this.dialogCancel()
        }
      })
    },
    // 取消
    dialogCancel () {
      this.$emit('update:dialogFormVisible')
      this.form = {}
    }
  }
  /* computed:{
      title(){
          return this.form.id?'修改学科':'新增学科'
      }
  } */
}
</script>

<style>
</style>
